<template>
  <div class="my-route">
    <input name="routeId" type="hidden" :value="route.id" />
    <div class="container">
      <div class="wrapper-img">
        <img
          v-if="route.routeBanner == null || route.routeBanner == ''"
          src="static/img/server/routebanner.jpg"
          height="175px"
          width="150px"
        />
        <img
          v-else
          :src="'static/img/server/routebanner/'+route.routeBanner"
          height="175px"
          width="150px"
        />
      </div>
      <div class="content">
        <div class="icon-swapper">
          <img
            v-if="route.iconUrl == null || route.iconUrl == ''"
            src="static/img/server/usericon.png"
            
          />
          <img v-else :src="$platIMG + route.iconUrl" />
        </div>
        <div class="text-wrapper1">
          <div class="text-line">
            <span>{{route.nickName}}</span>
            <span>{{route.grade}}</span>
            <span>34</span>
          </div>
          <div class="text-line">
            <span>{{route.level}}分</span>
            <span>|</span>
            <span>302评论</span>
          </div>
        </div>
        <div class="text-wrapper2">
          <div class="text-line">出发时间：{{route.startTime.slice(0, 10)}}</div>
          <div class="text-line">目的地：{{route.destName}}</div>
          <div class="text-line">人数：{{route.maxNum}}</div>
          <div class="text-line">是否拼团：{{route.isShare}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "my-route",
  data() {
    return {};
  },
  props: ["route"]
  
};
</script>

<style lang="stylus" scoped>
.my-route {
  // padding: 0.3rem 0 0;
  margin-top: 0.2rem;
  padding-bottom: 0.2rem;

  .container {
    background-color: #fff;
    height: 3.8rem;
    margin-top: 0.4rem;
    border-radius: 0.2rem;
    position: relative;
    // border: 1px solid #eee;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);

    .wrapper-img {
      position: absolute;
      top: -0.3rem;
      left: 0.2rem;
      overflow: hidden;
      width: 45%;
      height: 3.8rem;
      border-radius: 0.2rem;
      img  {
        width 100%
        height 100%
      }
    }

    .content {
      margin: 0.2rem 0.2rem 0.2rem 50%;
      height: 3.1rem;
      padding-top: 0.2rem;

      .icon-swapper {
        border-radius: 0.6rem;
        width: 1.2rem;
        height: 1.2rem;
        overflow: hidden;
        float: left;
        img {
          width 100%
          height 100%
        }
      }

      .text-wrapper1 {
        width: 2rem;
        height: 1.2rem;
        float: right;

        .text-line {
          margin-top: 0.1rem;
        }
      }

      .text-wrapper2 {
        float: left;

        .text-line {
          margin-top: 0.1rem;
        }
      }
    }
  }
}
</style>